<template>
    <div class="common-layout">
        <el-container>
            <!-- 头部部分 --> 
            <el-header>
                <el-row justify="space-between" align="middle">
                    <el-col :span="6">
                        <div class="breadcrumb">
                            <el-icon><Fold /></el-icon>
                            <span>财务</span>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="user-info">
                            <el-avatar :size="30" src="" />
                            <span class="username">admin</span>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-header class="white"></el-header>
            <!--内容部分-->
            <el-main>
                <!--搜索部分-->
                <el-header class="search">
                    <el-input
                        v-model="search"
                        style="width: 240px"
                        placeholder="请输入昵称"
                        :prefix-icon="Search"
                    />
                    <el-button type="primary" @click="searchAgent">搜索</el-button>
                </el-header>
                <!--刷新部分-->
                <el-header class="refresh">
                    <el-button type="info" @click="handleRefresh">
                       <el-icon><Refresh /></el-icon>
                       刷新
                    </el-button>
                </el-header>
                <!--表格部分-->
                <el-table :data="tableData" border style="width: 98%">
                    <el-table-column prop="id" label="编号" width="5%" />
                    <el-table-column prop="orderCode" label="订单编号" width="15%" />
                    <el-table-column prop="username" label="昵称" width="10%" />
                    <el-table-column prop="phone" label="手机号" width="15%" />
                    <el-table-column prop="money" label="支付金额/元" width="15%" />
                    <el-table-column prop="payMethed" label="交易方式" width="10%" />
                    <el-table-column prop="payTiem" label="购买时间" width="15%" />
                    <el-table-column prop="remarks" label="备注" width="15%" />
                </el-table>
                <!--分页器-->
                <div class="demo-pagination-block">
                    <el-pagination
                        v-model:current-page="pageIndex"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 20, 50, 100]" 
                        :disabled="disabled"
                        :background="background"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalCount" 
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// 引入图标组件
import { Fold, Refresh, Search } from '@element-plus/icons-vue'
// 引入接口和提示组件
import { getAgentList } from '@/components/Finance/DeviceStatisics'
import { ElMessage } from 'element-plus'

// 搜索关键词
const search = ref('')

// 表格数据
const tableData = ref([])

// 分页核心参数
const pageIndex = ref(1)    // 当前页码（默认第1页）
const pageSize = ref(20)    // 每页条数（默认20条）
const totalCount = ref(0)   // 总数据条数（从接口获取）
const size = ref('small')   // 分页组件尺寸（small/medium/large）
const disabled = ref(false) // 是否禁用分页
const background = ref(true)// 是否显示分页背景

// 刷新页面（重置分页+重新加载数据）
const handleRefresh = () => {
  pageIndex.value = 1
  pageSize.value = 20
  search.value = '' // 刷新时清空搜索框
  getAgentDataList()
}

// 搜索功能（搜索后重置到第1页）
const searchAgent = () => {
  pageIndex.value = 1
  getAgentDataList()
}

// 动态拼接请求参数（确保每次请求都是最新参数）
const getRequestParams = () => {
  return {
    pageIndex: pageIndex.value,
    pageSize: pageSize.value,
    username: search.value, // 昵称搜索（对应接口字段，可根据实际调整）
  }
}

// 核心：获取代理列表数据
const getAgentDataList = async () => {
  try {
    const params = getRequestParams()
    console.log('请求参数：', params) // 调试用，可删除
    // 发起异步请求（必须加 await，否则拿不到返回值）
    const res = await getAgentList(params)
    
    // 接口成功响应（根据实际接口返回格式调整）
    if (res.code === 200 ) {
      tableData.value = res.dataset.dataset.list
      totalCount.value = res.dataset.dataset.totalSize
    } else {
      tableData.value = []
      totalCount.value = 0
      ElMessage.error(res.message || '获取代理数据失败')
    }
  } catch (error) {
    console.error('代理列表请求失败：', error)
    tableData.value = []
    totalCount.value = 0
    ElMessage.error('网络错误，请检查连接或重试')
  }
}

// 分页事件：页大小改变
const handleSizeChange = (val) => {
  pageSize.value = val
  pageIndex.value = 1 // 页大小改变时回到第1页
  getAgentDataList()
}

// 分页事件：页码改变
const handleCurrentChange = (val) => {
  pageIndex.value = val
  getAgentDataList()
}

// 页面加载时初始化数据
onMounted(() => {
  getAgentDataList()
})
</script>

<style lang="less" scoped>
/* 头部部分 */
.el-header {
    height: 40px;
    border-bottom: 1px solid #eee;
    padding: 0 20px; /* 添加上下内边距，避免内容贴边 */
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
}

.username {
    white-space: nowrap; /* 防止用户名换行 */
}

.white {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    height: 10px !important; /* 顶部空白条高度 */
    border-bottom: none !important;
}

/* 内容部分 */
.el-main {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    min-height: calc(100vh - 100px); /* 占满剩余高度 */
}

/* 搜索部分 */
.search {
    width: 98%;
    border: none;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 刷新按钮部分 */
.refresh {
    width: 98%;
    border: none;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* 表格部分 */
::v-deep .el-table {
    margin-bottom: 20px; /* 与分页器间距 */
}

::v-deep .el-table .el-table__header {
    width: 100% !important;
}

::v-deep .el-table .el-table__body {
    width: 100% !important;
}

::v-deep .el-table .el-table__row {
    height: 50px;
}

::v-deep .el-table th,
::v-deep .el-table td {
    text-align: center;
    font-size: 14px;
}

/* 分页器部分 */
.demo-pagination-block {
    width: 98%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: auto; /* 底部对齐 */
    padding: 10px 0;
}

/* 兼容 Element Plus 新样式穿透（如果 ::v-deep 不生效，替换为 :deep()） */
:deep(.el-table) {
    margin-bottom: 20px;
}

:deep(.el-table th),
:deep(.el-table td) {
    text-align: center;
    font-size: 14px;
}
</style>